<script>
/**
 * @desc 折线图模块
 */

import { mapState, mapGetters } from 'vuex'
import { numberFixed } from '@/utils'

// 创建折线图对象数组
function createPoints(screenWidth, data) {
  // 将css转化的rpx重新转回px,再进行运算
  const boxWidth = screenWidth - 160 * screenWidth / 750
  const boxHeight = 400 * screenWidth / 750
  const heightScale = 0.8

  const min = Math.min(...data)
  const max = Math.max(...data)
  const diff = max - min

  const cellWidthPercent = numberFixed(1 / (data.length - 1))

  const pointList = data.map((v, i) => ({
    val: v,
    x: numberFixed(boxWidth * cellWidthPercent * i),
    y: numberFixed(
      boxHeight *
        (1 -
          numberFixed((v - min) / diff * heightScale + (1 - heightScale) / 2))
    )
  }))

  const lastIndex = pointList.length - 1

  const pointWithLine = pointList.map((v, i, arr) => {
    const isLast = i === lastIndex
    const a = cellWidthPercent * boxWidth
    const b = isLast ? 0 : arr[i + 1].y - v.y
    const c = isLast
      ? 0
      : numberFixed(Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)))
    const deg = numberFixed(Math.atan(b / a) * 180 / Math.PI)
    return { ...v, l: c, deg }
  })

  return pointWithLine
}

export default {
  name: 'chart-line',

  props: {
    typeIndex: {
      type: Number,
      default: 0
    },
    timeLevel: {
      type: Number,
      default: 1
    }
  },

  computed: {
    ...mapState(['systemInfo']),
    ...mapGetters('TheBook', ['monthStatistics', 'yearStatistics']),
    data() {
      const dataTimeLevel = this.timeLevel
        ? this.monthStatistics
        : this.yearStatistics
      return this.typeIndex ? dataTimeLevel.income : dataTimeLevel.expenditure
    },
    pointsForYear() {
      return createPoints(
        this.systemInfo.screenWidth,
        this.typeIndex
          ? this.yearStatistics.income
          : this.yearStatistics.expenditure
      )
    },
    pointsForMonth() {
      return createPoints(
        this.systemInfo.screenWidth,
        this.typeIndex
          ? this.monthStatistics.income
          : this.monthStatistics.expenditure
      )
    }
  }
}
</script>

<template>
  <div :class="$sty.chart">
    <i
      :class="$sty.dashed"
      :key="i"
      :style="{top: (i+1) * 25 + '%'}"
      v-for="(v,i) in 3"
    ></i>

    <block v-if="timeLevel">
      <span
        :class="$sty.point"
        :key="i"
        :style="{left:v.x + 'px', top:v.y + 'px'}"
        v-for="(v,i) in pointsForMonth"
      >
        <i
          :class="$sty.line"
          :style="{width: v.l + 'px', transform: 'rotate(' + v.deg + 'deg)'}"
        ></i>
        <b :class="$sty.ball"></b>
        <b :class="$sty.val">{{v.val}}</b>
      </span>
    </block>
    <block v-else>
      <span
        :class="$sty.point"
        :key="i"
        :style="{left:v.x + 'px', top:v.y + 'px'}"
        v-for="(v,i) in pointsForYear"
      >
        <i
          :class="$sty.line"
          :style="{width: v.l + 'px', transform: 'rotate(' + v.deg + 'deg)'}"
        ></i>
        <b :class="$sty.ball"></b>
        <b :class="$sty.val">{{v.val}}</b>
      </span>
    </block>
  </div>
</template>

<style lang="scss" module>
$point-size: 8px;

.chart {
  position: relative;
  height: 200px;
  margin: 10px 0;
  border-top: 2px solid $main-gray;
  border-bottom: 2px solid $main-gray;
}

.dashed {
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 2px dashed $main-gray;
}

.point {
  position: absolute;
  width: $point-size;
  height: $point-size;
  transform: translate(-50%, -50%);
}

.line {
  position: absolute;
  top: 75%;
  left: 100%;
  height: 50%;
  background: $main-yellow;
  transform-origin: left center;
}

.ball {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.5 * $point-size solid $main-red;
  background-color: #fff;
}

.val {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  line-height: 1.5;
  font-size: 14px;
  color: $article-color;
  transform: translate(-50%, -80%);
  opacity: 0;
  transition: all 0.25s;
  &:hover {
    opacity: 1;
  }
}
</style>
